<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-10-15 09:03:47
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-10-15 09:21:17
 * @FilePath: /nhw/src/views/Work/ThreeCloseOneClosed/index.vue
-->
<template>
  <div class="InspectionList">
    <NavBar fixed placeholder title="闭店记录" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#333333"
          @click="$router.push('/home/work')"
        />
      </template>
      <template #right>
        <Icon
          name="filter-o"
          size="0.53rem"
          color="#000"
          @click="show = true"
        />
      </template>
    </NavBar>
    <!-- tab栏 -->
    <Tabs class="tabList" v-model="activeName">
      <Tab title="未闭店" name="a"></Tab>
      <Tab title="已闭店" name="b"></Tab>
      <Tab title="全部" name="c"></Tab>
    </Tabs>
    <div class="list">
      <div v-for="(item, i) in list" :key="i">
        <div class="title" @click="showMonth(item, i)">
          <span>{{ item.ocsMonth }}</span>
          <Icon :name="item.flag ? 'arrow-down' : 'arrow-up'" size="0.53rem" />
        </div>
        <div v-if="item.flag" class="a">
          <div
            class="item"
            v-for="(item1, i1) in item.list"
            :key="i1"
            @click="
              $router.push({
                path: 'MyShopInfo',
                query: {
                  ocsNo: item1.ocsNo,
                },
              })
            "
          >
            <Field
              class="a"
              :label="item1.ocsDtm"
              :value="item1.ocsState"
              readonly
              input-align="right"
            />
            <Field label="闭店时间：" :value="item1.ocsCloseDtm" readonly />
          </div>
        </div>
      </div>
    </div>
    <Popup
      class="Popup"
      v-model="show"
      position="right"
      @closed="closed"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="flex title">筛选条件</div>

      <div class="flex iptList">
        <input
          type="text"
          placeholder="请选择开始时间"
          class="ipt1"
          v-model="startTime"
          readonly
          @click="showTime1 = true"
        />
        <span class="placeholder1 flex">一</span>
        <input
          type="text"
          placeholder="请选择结束时间"
          class="ipt1"
          v-model="endTime"
          readonly
          @click="showTime2 = true"
        />
      </div>

      <div class="btn-box flex">
        <Button class="reset" @click="reset">重置</Button>
        <Button class="ok" @click="ok">确定</Button>
      </div>
    </Popup>
    <Popup
      class="time"
      v-model="showTime1"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <DatetimePicker
        v-model="currentDate"
        type="year-month"
        title="开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startConfirm"
        @cancel="showTime1 = false"
        item-height="1rem"
      ></DatetimePicker>
    </Popup>
    <Popup
      class="time"
      v-model="showTime2"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <DatetimePicker
        v-model="currentDate"
        type="year-month"
        title="结束时间"
        :min-date="minDate1"
        :max-date="maxDate1"
        @confirm="endConfirm"
        @cancel="showTime2 = false"
        item-height="1rem"
      ></DatetimePicker>
    </Popup>
  </div>
</template>

<script>
import { todayMyShopMonthList, todayMyShopMonthInfoList } from "@/api/work";
import {
  Tabs,
  Tab,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
  Checkbox,
  CheckboxGroup,
  Search,
  PullRefresh,
  DatetimePicker,
} from "vant";
export default {
  props: {},
  data() {
    return {
      list: [],
      activeName: "a",
      show: false,
      showTime1: false,
      showTime2: false,
      startTime: "",
      endTime: "",
      startTime1: "",
      endTime1: "",
      minDate: new Date(2020, 0, 1),
      minDate1: new Date(2020, 0, 1),
      maxDate: new Date(),
      maxDate1: new Date(),
      currentDate: new Date(2021, 0, 17),
    };
  },
  computed: {
    ocsState() {
      let str = "";
      if (this.activeName == "a") {
        str = 0;
      }
      if (this.activeName == "b") {
        str = 1;
      }
      return str;
    },
  },
  created() {
    this.getMonthList();
  },
  mounted() {},
  watch: {
    activeName() {
      this.pageNum = 1;
      this.list = [];
      this.getMonthList();
    },
  },
  methods: {
    async getMonthList() {
      let info = JSON.parse(localStorage.getItem("userInfo"));
      const { value } = await todayMyShopMonthList({
        ocsTel: info.mobile,
        ocsState: this.ocsState,
        startDtm: this.startTime,
        endDtm: this.endTime,
      });
      console.log(value);
      value.forEach((v, i) => {
        v.flag = false;
        v.list = [];
      });
      this.list = value;
      if (this.list.length > 0) {
        this.a();
      }
    },
    a() {
      this.list.forEach((v, i) => {
        if (i == 0) {
          this.showMonth(v, i);
        }
      });
    },
    async onLoad(item) {
      let info = JSON.parse(localStorage.getItem("userInfo"));
      let a = this.$toast.loading({
        message: "请求中...",
        duration: 0,
      });
      const { value } = await todayMyShopMonthInfoList({
        ocsState: this.ocsState,
        ocsTel: info.mobile,
        ocsMonth: item.ocsMonth,
      });
      console.log(value);
      item.list = value;
      a.clear();
    },
    toJump(item) {
      this.$router.push({
        path: "MyShopInfo",
        query: {},
      });
    },
    showMonth(item, i) {
      item.flag = !item.flag;
      this.list.forEach((v, i1) => {
        if (i != i1) {
          v.flag = false;
        }
      });
      if (item.flag) {
        this.onLoad(item);
      }
    },
    reset() {
      this.startTime = "";
      this.endTime = "";
    },
    ok() {
      this.pageNum = 1;
      this.startTime1 = this.startTime;
      this.endTime1 = this.endTime;
      this.list = [];
      this.getMonthList();
      this.show = false;
    },
    startConfirm(value) {
      console.log(this.getTime(value));
      this.startTime = this.getTime(value);
      this.minDate1 = value;
      this.showTime1 = false;
    },
    endConfirm(value) {
      console.log(this.getTime(value));
      this.endTime = this.getTime(value);
      this.maxDate = value;
      this.showTime2 = false;
    },
    getTime(time) {
      const year = time.getFullYear();
      let Month = time.getMonth() + 1;
      const Date = time.getDate();
      Month = Month < 10 ? "0" + Month : Month;
      // let hour = time.getHours();
      // hour = hour < 10 ? "0" + hour : hour;
      // let m = time.getMinutes();
      // m = m < 10 ? "0" + m : m;
      return `${year}-${Month}`;
    },
    closed() {
      this.startTime = this.startTime1;
      this.endTime = this.endTime1;
    },
  },
  components: {
    Checkbox,
    CheckboxGroup,
    Tabs,
    Tab,
    NavBar,
    Button,
    Popup,
    Icon,
    Field,
    List,
    Cell,
    Search,
    PullRefresh,
    DatetimePicker,
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";
.InspectionList {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  /deep/ .van-tabs__line {
    background-color: @primary;
  }

  .tabList {
    position: fixed;
    top: 92px;
    width: 100%;
  }
  .search {
    position: fixed;
    width: 100%;
    top: 180px;
  }
  .list {
    margin-top: 90px;
    .title {
      color: @primary;
      padding: 10px;
      padding-left: 20px;
    }
    .item {
      margin-bottom: 10px;
      .a {
        /deep/.van-field__control,
        .van-field__control--right {
          color: @primary;
        }
      }
    }
  }
  .Popup {
    .task {
      border-bottom: 1px solid #a7a7a7;
    }
    .title {
      padding: 55px 0 0 0;
      font-size: 38px;
      font-weight: 700;
      color: #a7a7a7;
    }
    .state {
      display: flex;
      //   justify-content: space-between;
      flex-direction: row;
      font-size: 26px;
      color: #6e6e6e;
      flex-wrap: wrap;
      .state-item {
        width: 33%;
        height: 74px;
        .btn {
          width: 157px;
          height: 58px;
          background-color: #f6f6f6;
          border-radius: 4px;
          color: #6e6e6e;
        }
        .change {
          border: 2px solid #c6a86f;
        }
      }
    }
    .iptList {
      margin-top: 100px;
    }
    .ipt {
      width: 90%;
      height: 58px;
      text-indent: 1em;
      font-size: 24px;
      margin-left: 20px;
      background-color: #f6f6f6;
    }
    .ipt1 {
      width: 40%;
      height: 58px;
      text-indent: 1em;
      font-size: 24px;
      // margin-top: 50%;
      // margin-left: 50%;
      // transform: translate(-50%, -50%);
      background-color: #f6f6f6;
    }
    .placeholder1 {
      width: 60px;
      height: 58px;
      color: #3982f6;
    }
    .btn-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      margin-bottom: 40px;
      .ok {
        width: 157px;
        height: 58px;
        background-color: #3982f6;
        border-radius: 4px;
        color: #fff;
        margin-left: 50px;
      }
      .reset {
        width: 157px;
        height: 58px;
        background-color: #dddddd;
        border-radius: 4px;
        color: #6e6e6e;
      }
    }
  }
}
</style>
